<template>
<div>
    <el-button @click="getdata">获取数据</el-button>
    <el-button @click="getdata">保存全部</el-button>
     <realmap :showcontrol="true" :allxmlist="allxmlist" @drawend="drawend"></realmap> 
</div>
   
</template>
<script>
import Realmap from "./Realmap"
const jsts = require("jsts/dist/jsts");
import Map from "ol/Map.js";
import View from "ol/View.js";
import GeoJSON from "ol/format/GeoJSON.js";
import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer.js";
import { fromLonLat } from "ol/proj.js";
import Feature from "ol/Feature";
import OSM from "ol/source/OSM.js";
import VectorSource from "ol/source/Vector.js";
import LinearRing from "ol/geom/LinearRing.js";
import {
  Point,
  LineString,
  Polygon,
  MultiPoint,
  MultiLineString,
  MultiPolygon
} from "ol/geom.js";
let parser = new jsts.io.OL3Parser();
parser.inject(
  Point,
  LineString,
  LinearRing,
  Polygon,
  MultiPoint,
  MultiLineString,
  MultiPolygon,
);
export default {
    components:{
        Realmap
    },
    data(){
        return {
        allxmlist:[],
        editlist:[],
        }
    },
    methods:{  
              postdata(list) {
      let _this = this;
        this.$axios({
          method: "post",
          url: "http://192.168.31.16:8080/pwjcxx/addAllList",
          data:{list}
        })
          .then(response => {
            console.log(response)
          })
          .catch(error => {
          });
    },
    drawend(path){
      console.log(path)
      this.editlist.push(
        path
      )
        // this.allxmlist.forEach(item=>{
        //     if(item.jcxxid==path[0].jcxxid){
        //     item.polylinelist.push(item)
        // }
        // })
    },
    getbuffered(data){
      data = JSON.parse(JSON.stringify(data));
      if (data.length == 1) {
        data.push(data[0]);
      }
      let linestring = new LineString(data).transform("EPSG:4326", "EPSG:3857");
      let jstsGeom = parser.read(linestring);
      var format = new GeoJSON();
      // create a buffer of 40 meters around each line
      var buffered = jstsGeom.buffer(50);
      var geomtry = parser.write(buffered);
      let json = format.writeGeometry(
        geomtry.transform("EPSG:3857", "EPSG:4326")
      );
      return JSON.parse(json).coordinates[0].map(ele => {
        return {
          lng: ele[0],
          lat: ele[1]
        };
      });
        },
     createbuffer(points){        
         const _this = this;    
        if(!points){
             return []
         }
         points = JSON.parse(points)
        points=points.map(ele=>{
             return ele.value
         });
        points=points.filter(item=>!!item).map(ele=>{
             return [ele]
         })
         return points.map(ele=>{
            return _this.getbuffered(ele)
         })
    },
     farmtter(value,jcxxid){
         if(!value){
             return []
         }
         let data = JSON.parse(value);
         data=data.map(ele=>{
             return ele.value
         });
         return  data.filter(item=>!!item).map(ele=>{
             return {
                 jcxxid,
                 lng:ele[0],
                 lat:ele[1]
             }
         })
     },   
    getdata(){
     const _this = this;       
     this.$axios({
      method: "get",
      url:
        "http://192.168.31.16:8080/pwjcxx/selectAllNoPage?xid=117"
        })
      .then(response => {
        const _data = response.data.data;

       _this.allxmlist = _data.map(ele=>{
            ele.pointslist=_this.farmtter(ele.xaddress,ele.jcxxid);
            ele.polylinelist=ele.line||[]
            ele.polygonPathlist =ele.xbuffer||[..._this.createbuffer(ele.xaddress),..._this.createbuffer(ele.line)];
            return ele;
        })
      })
      .catch(error => {
        console.log(error);
      });
        }
    },
    mounted(){
            this.$axios({
      method: "get",
      url:
        "http://192.168.31.16:8080/loginSubmit?loginName=A001&password=123456"
    })
      .then(response => {
        console.log(response);
        
      })
      .catch(error => {
        console.log(error);
      });
    }
}
</script>

